<template>
	<view class="">
		<view class="">
			<button open-type="chooseAvatar" :plain="true" @chooseavatar="onChooseAvatar" class="avatar-wrapper">
				<image class="avatar" v-if="avatarUrl == 'https://lianfan.nccpu.cn/image/morentx.png' || !avatarUrl" src="https://lianfan.nccpu.cn/image/morentx.png"></image>
				<image class="avatar" :src="avatarUrl" v-else></image>
			</button>
			<view class="flex_">
				<text class="nicheng">昵&nbsp;&nbsp;&nbsp;&nbsp;称</text>
				<input type="nickname" v-model="value" id="nickname-input" class="weui-input" @blur="onNickName(e)"
					placeholder="请输入昵称" />
			</view>
			<view class="flex_ justify-between">
				<view class="" style="display: flex;align-items: center;">
					<text class="nicheng">手机号</text>
					<input type="number" v-model="phone" id="nickname-input" :disabled="true" class="weui-input"
						placeholder="请授权手机号" />
				</view>
				<view class="" style="margin-right: 30rpx;">
					<u-button type="primary" openType="getPhoneNumber" @getphonenumber="getPhoneNumber" size="small"
						text="一键授权"></u-button>
				</view>
			</view>
		</view>
		<view class="baocun" @click="submit">
			<view class="btn">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		setUserInfo,
		getPhone,
		User_detail,
		index
	} from '@/api/user.js'
	import {
		upFile
	} from "@/utils/url.js"
	export default {
		data() {
			return {
				avatarUrl: '',
				// avatarUrl: '',
				successavatar: '',
				value: '',
				turn_to: '',
				phone: '',
			}
		},
		onLoad(option) {
			console.log("option的执委会", option);
			this.top_img();
			if (option.avatar) {
				this.avatarUrl = option.avatar
			}
			if (option.nickname) {
				this.value = option.nickname
			}
		},
		methods: {
			top_img(){
				index({}).then(res => {
					console.log("替换logog",res);
					if(res.code == 1){
						this.avatarUrl = res.data.xieyi.logo
						this.title = res.data.xieyi.sitename
						console.log("打飞机上课啦防静电上课啦飞机啊双打卡拉法基大山卡拉",this.top_img);
					}
				})
			},
			onChooseAvatar(e) {
				console.log("我的我我我", e);
				this.avatarUrl = e.detail.avatarUrl
				uni.uploadFile({
					url: upFile,
					fileType: 'image', //图片类型
					filePath: this.avatarUrl, //哪张图片
					name: 'file', //对应接口的文件名称
					header: { //请求头
						// "Content-Type": "multipart/form-data"
					},
					formData: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						//成功的回调
						//一般用于重新获取数据渲染页面
						console.log("00000000000000000000000000000000000000000________________", res)
						let result = JSON.parse(res.data)
						if (result.code == 1) {
							this.successavatar = result.data.url
							this.avatarUrl = res.data.fullurl
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						//失败的回调
						console.log("uploadFile", err)
					},
				})
			},
			onNickName(e) {
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
					.select("#nickname-input")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						const nickName = res?.[0]?.value
						console.log('昵称', nickName)
						this.value = nickName
					})
			},
			getPhoneNumber(e) {
				let that = this
				if (e.detail.errMsg && e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					console.log('用户拒绝获取手机号码');
					return
				}
				var data = {
					code: e.detail.code,
					encryptedData: e.detail.encryptedData, //需要解密的内容
					iv: e.detail.iv, //偏移量
					token: uni.getStorageSync('token')
				}
				getPhone(data).then(res => {
					console.log(data); //用户同意获取手机号码
					if (res.code == 1) {
						that.phone = res.data.phoneNumber
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取用户详细
			get_userdetail() {
				var data = {
					token: uni.getStorageSync('token')
				}
				User_detail(data).then(res => {
					console.log("获取用户详细为：", res);
					if (res.code == 1) {
						uni.setStorageSync('userInfo', res.data.user)
					}
				})
			},
			submit() {
				let a = 'https://s1.ax1x.com/2023/02/22/pSjhrRJ.png'

				if (!this.successavatar || this.successavatar.indexOf('assets/img/avatar.png') > -1) {
					uni.showToast({
						title: '请上传/选择头像',
						icon: 'none'
					})
					return
				}
				if (!this.value) {
					uni.showToast({
						title: '请填写/选择昵称',
						icon: 'none'
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return
				}
				var data = {
					avatar: this.successavatar,
					nickname: this.value,
					mobile: this.phone,
					token: uni.getStorageSync('token')
				}
				setUserInfo(data).then(res => {
					console.log("保存成功", res);
					if (res.code == 1) {
						// uni.setStorageSync('avatar', this.successavatar)
						this.get_userdetail()
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style>
	.avatar-wrapper {
		border: none !important;
		outline: none;
		margin-top: 30rpx;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
	}

	.flex_ {
		border-bottom: 1rpx solid #f5f5f5;
		margin: auto;
		display: flex;
		height: 100rpx;
		align-items: center;
	}

	.nicheng {
		margin-left: 30rpx;
		font-size: 32rpx;
	}

	.weui-input {
		margin-left: 30rpx;
		font-size: 30rpx;
	}

	.baocun {
		margin-top: 200rpx;
	}

	.btn {
		width: 400rpx;
		height: 70rpx;
		color: #fff;
		font-size: 30rpx;
		margin: auto;
		background-color: #55aaff;
		border-radius: 20rpx;
		text-align: center;
		line-height: 70rpx;
	}

	page {
		background-color: #fff;
	}
</style>